<template>
  <div
    class="edit-wrapper"
    :class="{ active: active }"
    @click="onItemClick(id)"
  >
    <slot></slot>
  </div>
</template>
<script lang="ts" setup>
defineProps({
  id: {
    type: String,
    required: true,
  },
  active: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["setActive"]);

const onItemClick = (id: string) => {
  emit("setActive", id);
};
</script>
<style lang="less" scoped>
.edit-wrapper {
  padding: 0px;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
}
.edit-wrapper:hover {
  border: 1px dashed #ccc;
}
.edit-wrapper.active {
  border: 1px solid #1890ff;
  user-select: none;
  z-index: 1500;
}
</style>